<template>
  <div class="container">
    <!-- 根据所有的topics去渲染对应的结构 -->
    <!-- 所有的选择题 -->
    <p
      v-show="topics.singleChoice && topics.singleChoice.length !== 0"
      class="title"
    >
      一、单选题：本题总共{{ topics.singleChoice.length }}小题
      <span v-show="criterion.singleChoice"
        >， 每题{{ criterion.singleChoice }}分，共{{
          topics.singleChoice.length * criterion.singleChoice
        }}分。</span
      >
    </p>
    <single-choice
      v-for="topic in topics.singleChoice"
      :key="topic.tid"
      :topic="topic"
      :type="type"
      :finish="finish"
      :answer="answer[topic.order - 1]"
      :reviewResult="reviewResult[topic.order - 1]"
    ></single-choice>
    <!-- 多选 -->
    <p
      v-show="topics.multipleChoice && topics.multipleChoice.length !== 0"
      class="title"
    >
      二、多项选择题：本题总共{{ topics.multipleChoice.length }}小题<span
        v-show="criterion.multipleChoice"
      >
        ，每题{{ criterion.multipleChoice }}分，共{{
          topics.multipleChoice.length * criterion.multipleChoice
        }}分。
      </span>
    </p>
    <multiple-choice
      v-for="topic in topics.multipleChoice"
      :key="topic.tid"
      :topic="topic"
      :type="type"
      :finish="finish"
      :answer="answer[topic.order - 1]"
      :reviewResult="reviewResult[topic.order - 1]"
    ></multiple-choice>
    <!-- 判断题 -->
    <p
      v-show="topics.trueOrFalse && topics.trueOrFalse.length !== 0"
      class="title"
    >
      三、判断题：本题总共{{ topics.trueOrFalse.length }}小题<span
        v-show="criterion.trueOrFalse"
      >
        ，每题{{ criterion.trueOrFalse }}分，总共{{
          topics.trueOrFalse.length * criterion.trueOrFalse
        }}分。
      </span>
    </p>
    <true-or-false
      v-for="topic in topics.trueOrFalse"
      :key="topic.tid"
      :topic="topic"
      :type="type"
      :finish="finish"
      :answer="answer[topic.order - 1]"
      :reviewResult="reviewResult[topic.order - 1]"
    >
    </true-or-false>
    <!-- 填空题 -->
    <p
      v-show="topics.blankQuestion && topics.blankQuestion.length !== 0"
      class="title"
    >
      四、填空题，本题共{{ topics.blankQuestion.length }}小题<span
        v-show="criterion.blankQuestion"
      >
        ，每题{{ criterion.blankQuestion }}分，总共{{
          topics.blankQuestion.length * criterion.blankQuestion
        }}分。
      </span>
    </p>
    <blank-question
      v-for="topic in topics.blankQuestion"
      :key="topic.tid"
      :topic="topic"
      :type="type"
      :finish="finish"
      :answer="answer[topic.order - 1]"
      :reviewResult="reviewResult[topic.order - 1]"
    >
    </blank-question>

    <!-- 主观题 -->
    <p
      v-show="topics.essayQuestion && topics.essayQuestion.length !== 0"
      class="title"
    >
      五、主观题，本题共{{ topics.essayQuestion.length }}小题。
    </p>
    <essay-question
      v-for="topic in topics.essayQuestion"
      :key="topic.tid"
      :topic="topic"
      :type="type"
      :finish="finish"
      :answer="answer[topic.order - 1]"
      :reviewResult="reviewResult[topic.order - 1]"
    >
    </essay-question>
  </div>
</template>

<script>
import SingleChoice from "@/components/question_types/SingleChoice.vue";
import MultipleChoice from "@/components/question_types/MultipleChoice.vue";
import TrueOrFalse from "@/components/question_types/TrueOrFalse.vue";
import BlankQuestion from "@/components/question_types/BlankQuestion.vue";
import EssayQuestion from "@/components/question_types/EssayQuestion.vue";
export default {
  name: "ExamPaper",
  components: {
    SingleChoice,
    MultipleChoice,
    TrueOrFalse,
    BlankQuestion,
    EssayQuestion,
  },
  props: ["finish", "topics", "type", "answer", "criterion", "reviewResult"],
};
</script>

<style lang='less' scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
</style>